<template lang="html">
  <mu-list v-if="isAjax && nowMessageList">
    <!--判定ajax结束后，且有消息列表存在才开始渲染组件，防止报错-->
    <div
      v-for="(item, index) of nowMessageList"
      :class="[{swipeleft: isSwipe[index]}, 'wrap']"
      @click="getActiveId_x(item._id, index)"
      ref="child"
      :key="index"
    >
      <mu-list-item
        :title="item.friend.name"
        :describeLine="1"
        :disableRipple="true"
        class="list-item"
      >
      <!-- 头像 -->
        <mu-avatar
          :src="item.friend.avatar"
          slot="leftAvatar"
        />
        <!-- 预览信息 -->
        <span slot="describe">
          <span style="color: rgba(0, 0, 0, .5)">{{item.list[item.list.length-1].message}}</span>
        </span>
        <!-- 时间与待处理 -->
        <div class="item-right" slot="right">
          <!--获取到当前聊天队列，最后一条内容的time-->
          <span class="time">{{item.list[item.list.length-1].time}}</span>
          <!--数据条数-->
          <!--数据需求是为字符串-->
          <mu-badge :content="`${item.list.length-1}`" />
        </div>
      </mu-list-item>
      <!--分割线-->
      <!--阻止时间冒泡-->
      <div class="delete" @click.stop="removeM(item._id)">删除</div>
    </div>
  </mu-list>
</template>

<script>
import {mapState, mapGetters, mapMutations} from 'vuex'
export default {
  name: 'message',
  data() {
    return {
      isSwipe: [false, false, false]
    }
  },
  computed: {
    ...mapGetters(['nowMessageList']),
    // ajax是否已经结束
    ...mapState(['isAjax'])
  },
  methods: {
    ...mapMutations(['showDialog', 'getActiveId', 'zeroRemove', 'removeMessage']),
    // 获取点击的friend的_id
    getActiveId_x(id) {
      this.getActiveId({ activeId: id })
      this.showDialog()
    },
    // 删除信息
    removeM(_id) {
      this.removeMessage({_id})
    }
  },
  created() {
    setTimeout(()=> {
      // 判断是否存在信息列表
      if(this.$refs.child) {
        this.$refs.child.forEach((element, index) => {
          let x, y, X, Y, swipeX, swipeY;
          // 监听touchstart
          element.addEventListener('touchstart', e=> {
            x = e.changedTouches[0].pageX;
            y = e.changedTouches[0].pageY;
            swipeX = true;
            swipeY = true;
            this.isSwipe = [false, false, false]
          });
          element.addEventListener('touchmove', e => {
            X = event.changedTouches[0].pageX
            Y = event.changedTouches[0].pageY
            if (swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0) {
              // 阻止默认事件
              e.stopPropagation()
              // 右滑
              if(X - x > 10) {
                e.preventDefault();
                this.isSwipe.splice(index, 1, false);
              }
              // 左滑
              if(x - X > 10) {
                e.preventDefault();
                this.isSwipe.splice(index, 1 , true);
              }
              swipeY = false
            }
            if (swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
              swipeX = false
            }
          });
        });
      }
    }, 1000);
  }
}
</script>

<style lang="scss">
  @import '../../assets/scss/mixin.scss';
  .mu-list {
    overflow: hidden;
    background-color: $grey;
    // 左滑删除
    .swipeleft {
      transform:translateX(-20%);
    }
    .wrap {
      width: 125%;
      overflow: hidden;
      transition: all .3s linear;
      @include border-b-1px(rgba(0, 0, 0, .1));
      .list-item {
        float: left;
        width: 80%;
        height: 10vh;
        background: $white;
        transition:all 0.3s linear;
      }
      .delete {
        float: right;
        display: block;
        height: 10vh;
        line-height: 10vh;
        width: 20%;
        text-align: center;
        font-size: 1.2em;
        font-weight: 500;
        color: $white;
        background: #ff1744;
      }
    }
    .item-right {
      position: relative;
      .time {
        display: inline-block;
        position: absolute;
        top: -10px;
        left: -16px;
      }
      .mu-badge {
        display: inline-block;
        position: absolute;
        top: 0;
        left: -10px;
        border-radius: 5px;
      }
    }
  }
</style>
